@mixin around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

@mixin between() {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}

.home {
	height: 100%;
	display: flex;
	flex-direction: column;
}

header {
	background-color: #f2f2f2;

	.top {
		height: 50px;
		@include between();

		.search {
			background-color: white;
			flex: 1;
			margin: 0 10px;
			@include around();
			height: 70%;
			border-radius: 10px;
			border: .5px solid #ccc;

			input {
				background-color: transparent;
				outline: none;
				border: 0;
				flex: 1;
				font-size: 10px;
			}
		}

		img {
			height: 20px;
		}
	}

	.nav {
		display: none;
		@include between();
		height: 40px;

		.nav-title {
			flex: 1;
			@include around();
			justify-content: center;

			span {
				margin: 0 13px;
				font-size: 12px;

				&.active {
					color: #ff6900;
					border-bottom: 2px solid #ff6900;
				}
			}
		}

		i {
			font-size: 12px;
		}
	}
}

main {
	flex: 1;
	overflow-y: scroll;

	.content {
		display: none;

		&.active {
			display: block;
		}

		.banner {
			img {
				width: 100%;
				height: 200px;
			}
		}

		.menu {
			display: flex;
			flex-wrap: wrap;

			a {
				width: 20%;

				img {
					width: 100%;
				}
			}
		}

		.nav-img {
			display: flex;

			.left,
			.right {
				flex: 1;

				img {
					width: 100%;
				}
			}

			.left img {
				padding-right: 2px;
			}

			.right img {
				padding-left: 2px;
			}
		}

		.recomm {
			width: 100%;
		}

		.home-list {
			display: flex;
			flex-wrap: wrap;

			dl {
				width: 50%;
				padding: 5px;
				margin: 5px 0;

				dt {
					img {
						width: 100%;
					}
				}

				dd {
					@include around();
					flex-direction: column;
					h4 {
						height: 22px;
						overflow: hidden;
					}
					small {
						color: #999;
						margin: 2px 0;
					}

					b {
						color: red;
						font-size: 15px;
						margin: 2px 0;

					}

					span {
						width: 100px;
						height: 30px;
						background-color: #ea625b;
						color: white;
						@include around();
						font-size: 12px;
						border-radius: 5px;
					}
				}
			}
		}
	}
}

.new {
	position: fixed;
	bottom: 75px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
}

.back-top {
	position: fixed;
	bottom: 90px;
	right: 10px;

	img {
		width: 50px;
	}
}

.animate {
	animation: run 2s infinite;
}

@keyframes run {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

